<!DOCTYPE html>
<html lang="en" data-vue="vmRatingPlayerDetail" id="ratingPlayerDetail">
<head>
    <meta charset="UTF-8">
    <title>{{detail.PlayerName}}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="Description" data-localize="pages.points.head.desc" content="{{detail.PlayerName}}">
    <meta name="Keywords" data-localize="pages.points.head.keywords" content="{{detail.PlayerName}}">
    <link href="res/images/cont/favicon.ico" rel="shortcut icon">

    <link rel="stylesheet" href="res/css/all-common.css">
    <link rel="stylesheet" href="res/css/rating.css">

    <!--html font size set-->
    <script src="res/js/set-font-size.js"></script>

    <!--js common start-->
    <script src="res/lib/jquery/jquery.min.js"></script>
    <script src="res/lib/jquery/jquery-localize/jquery.localize.js"></script>
    <script src="res/lib/store/store-json2.min.js"></script>
    <script src="res/lib/vue/vue.min.js"></script>
    <script src="res/lib/moment/moment.min.js"></script>
    <script src="res/lib/moment/moment-locales.min.js"></script>
    <script src="res/js/common.js"></script>
    <!--js common end-->
</head>
<body>
<header class="p-clear-fix">
    <p class="lang" id="langBox">
        <a href="javascript:void(0);" data-lang="zh-TW">繁体中文</a> /
        <a href="javascript:void(0);" data-lang="zh-CN">简体中文</a> /
        <a href="javascript:void(0);" data-lang="en">English</a>
    </p>

    <h1>
        <a href="/index.html" title="Logo" class="flex-abs-mid"><img src="res/images/cont/index/logo.png"/></a>
    </h1>

    <!--    <div class="login">
            <a href="#">
                <img src="res/images/cont/index/login-2.png" />
            </a>


            <p class="login-btn hide">
                <a href="#" class="p-btn-round">登陆</a>
                <a href="#">注册</a>
            </p>

            <p class="user-info ">
                <a href="#"><img src="res/images/cont/index/user-male.png" /></a>
                <a href="#" class="name">Aaron.Ming Aaron.Ming</a>
                <a href="#" class="p-btn-round">退出</a>
            </p>


        </div>-->
</header>
<!--main nav-->
<nav class="p-clear-fix">
    <ul class="p-clear-fix" id="mainNav">
        <li data-name="index"><a href="index.html" data-localize="nav.news"></a></li>
        <li data-name="points"><a href="points.html" data-localize="nav.points"></a></li>
        <li data-name="matches"><a href="matches.html" data-localize="nav.matches"></a></li>
        <li data-name="rating"><a href="rating.html" data-localize="nav.rating"></a></li>
    </ul>
</nav>
<section class="area">
    <ul id="regionArea">
        <li data-val="50" class="cur"><img src="res/images/cont/location/location-global.png" class="global-img"> <span>Global</span>
        </li>
        <li data-val="45"><img src="res/images/cont/location/location-lck.png"> <span>LCK</span></li>
        <li data-val="44"><img src="res/images/cont/location/location-lcseu.png"> <span>EULCS</span></li>
        <li data-val="41"><img src="res/images/cont/location/location-lpl.png"> <span>LPL</span></li>
        <li data-val="43"><img src="res/images/cont/location/location-lcsna.png"> <span>NALCS</span></li>
        <li data-val="42"><img src="res/images/cont/location/location-lms.png"> <span>LMS</span></li>
    </ul>
</section>


<!--选手详情-->
<div class="su_corps ">
    <div class="t ">
        <img src="{{detail.PlayerLogo}}">
        <p>{{detail.PlayerName}}</p>
    </div>

    <div class="l">
        <ul class="rating-area player">
            <li>
                <div>
                    <p>{{detail.RegionName}}</p>
                    <p class="img-box">
                        <img  src="{{detail.RegionLogo}}">
                    </p>
                </div>

                <div>
                    <p>全球排名</p>
                    <p class="img-box"><span>{{detail.GlobalRanking}}</span></p>
                </div>

                <div>
                    <p>位置排名</p>
                    <p class="img-box"><span>{{detail.RoleRanking}}</span></p>
                </div>

                <div>
                    <p>Matrix价值</p>
                    <p class="img-box"><span>{{detail.Price}}</span></p>
                </div>
            </li>

            <li>
                <div>
                    <p>胜率</p>
                    <p class="img-box"><span>{{detail.WinRate}}%</span></p>
                </div>

                <div>
                    <p>平均KDA</p>
                    <p class="img-box"><span>{{detail.Kda}}</span></p>
                </div>

                <div>
                    <p>参团率</p>
                    <p class="img-box"><span>{{detail.AvgKillParticipation}}%</span></p>
                </div>

                <div>
                    <p>实力评分</p>
                    <p class="img-box"><span>{{detail.Strength}}</span></p>
                </div>
            </li>

        </ul>
    </div>



    <div class="p p-text-center ">
        <ul class="p-clear-fix">

            <template v-for="hero in detail.MostPickChampions">
                <li>
                    <img src="{{hero.Logo}}" class="mCS_img_loaded">
                    <p>{{hero.Name}}</p>
                    <p class="color-dark-Blue hero-rate">胜率:{{hero.WinRate}}%</p>
                </li>
            </template>
        </ul>
    </div>

    <div class="s">
        <div class="radar" id="radarBox">
            radarBox
        </div>
    </div>

    <div class="p-tab news" id="chartZonePlayer">
        <ul class="p-tab-h p-clear-fix">
            <li class="cur" data-integral="{{detail.PriceList[0].slice(0,10)}}"><span>10局 </span></li>
            <li data-integral="{{detail.PriceList[0].slice(0,25)}}"><span>25局</span></li>
            <li data-integral="{{detail.PriceList[0].slice(0,40)}}"><span>40局</span></li>
        </ul>
        <div class="p-tab-c">
            <div class="trend ">
                <div class="l ">队伍实力评分走势</div>
                <div class="r ">
                    <ul>
                        <li>实际价格<p class="p-white">15.15</p></li>
                        <li>价格变动<p class="p-green">0.14 <img src="res/images/cont/grade/down-green-s.png"></p></li>
                        <li>百分百变动<p class="p-red">0.91% <img src="res/images/cont/grade/down-red-x.png"></p></li>
                    </ul>
                </div>
            </div>
            <div class="chart" id="lineBoxPlayer">10</div>
        </div>
    </div>

</div>


<!--footer-->
<footer id="footer">
    <p>©T.E.C.H.Ltd</p>
</footer>


<!--page js-->
<script src="res/lib/echarts3/echarts.min.js"></script>
<script src="res/js/rating-player-detail.js"></script>
</body>
</html>